Base layout

The base layout is the main layout in Series 40 full touch. It defines the generic zones in the UI screen estate.

1 Status bar

18 px by 240 px wide at the top of the display. In landscape layout: 18 px by 400 px wide.
Status bar is interactive. User can see latest notifications like missed call, new text, Wi-Fi found.

2 Header bar

40 px by 240 px wide (including 1-pixel divider line). In landscape layout: 34 px by 400 px wide, incl. divider line. Font: Nokia Standard Regular, size 20 px.
The header is a text aid that helps users identify their current location in the application or menu structure. It displays the current view title in lower case. Header title is non-interactive, except in apps like Browser, where it turns into web URL.
Action buttons are used throughout a view to promote the most important action.
- Action 1 (right) is the primary action in the view, for example "Send message" in message composer, "Add contact" in contact list and "Done" when editing.
- Action 2 (left) is Options, providing access to secondary actions in Options list.
Action buttons are icon based and don't need a text label to explain the intent. They are based on well-established metaphors.

3 Main content zone

342 px by 240 px wide. In landscape layout 142 px by 400 px wide.
Main application zone for core apps.

4 Bottom navigation zone

46 px by 240 px wide. In landscape layout 46 px by 400 px wide.
Back (42 px by 42 px) appears at the bottom right of the screen. Has the same size in portrait and landscape layouts.
Category bar can be accessed horizontally to show various views of the app. Categories act like tabs.

Portrait vs. landscape

Series 40 full touch UI supports two views of screen orientation: portrait and landscape.

In portrait view, the page is vertically oriented with the send and end key at the bottom of the device, and the height of the page is greater than the width. Portrait view is the standard view, and should be supported in all applications.

Landscape view can additionally be supported where this adds value (e.g. camera, photo gallery). For those apps that support both portrait and landscape, the appropriate orientation is used according to the orientation sensor.

Both orientations share status bar, header bar and category bar. The only difference is that in landscape view the header bar height decreases in size from 40 to 34 px to allow more screen real estate for content. Furthermore, in landscape view the category bar expands across the screen, allowing a maximum of six visible categories.

Orientation changes must be done only by rotating the device. If an application supports only one view, no changes should happen in case of rotation. Orientation changes should always be consistent and share the same transition for all applications. All orientations maintain focus on the primary content and generally its layout shouldn’t change drastically except for few cases when changes celebrate user generated content.

In exceptional cases an app may support only landscape, not portrait, but this must only be where the content is wholly landscape-based (e.g. video playback).

Figure 1. List in both orientations

Right-to-left languages

Text fields in layouts are mirrored for right-to-left languages, for example in lists and Alerts and pop-up lists.

List items with icons are fully mirrored: the list icon is placed at the right side with right-aligned text next to it. Vertical scroll bar is placed at the left side of display.

Any interactive elements – such as category bar icons, Back button etc. – should not be mirrored. Action buttons remain in their position regardless of language.